<template>
  <div class="border">
    <div class="lan"></div>
    <span class="p">用户列表</span>
    <div class="erhang">
    </div>
    <div class="table" style="font-size: 10px">
      <el-table :data="list1" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
        <el-table-column prop="userPid" label="编号" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userImg" label="头像" align="center" min-width="15%">
          <template slot-scope="scope">
            <el-avatar size="large" :src="scope.row.userImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="userNick" label="昵称" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userPhone" label="联系方式" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userId" label="操作" align="center" min-width="35%">
          <template slot-scope="scope">
              <el-button type="danger"    @click="deleteById(scope.row)" style="margin-left: 16px;">注销</el-button>
              <el-button type="success"   @click="drawer1 = true,updateById(scope.row)"  style="margin-left: 16px;">修改</el-button>
              <el-button type="primary"   @click="drawer = true,xiang(scope.row)"  style="margin-left: 16px;">详情</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-drawer
        title='编辑用户信息'
        :visible.sync="drawer1"
        :direction="direction"
        :before-close="handleClose">
        <el-form ref="form2" :model="form2" label-width="80px">
          <el-form-item label="用户编号">
            <el-input disabled v-model="form2.userPid"></el-input>
          </el-form-item>
          <el-form-item label="消费总额">
            <el-input disabled v-model="form2.userPay"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-col :span="11">
              <el-date-picker  type="date" placeholder="选择日期" v-model="form2.birthday" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="用户年龄">
            <el-input  v-model="form2.userAge"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="form2.userNick"></el-input>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-radio-group v-model="form2.userSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-radio-group v-model="form2.userType">
              <el-radio :label="1">用户</el-radio>
              <el-radio :label="2">会员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账号/电话">
            <el-input v-model="form2.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form2.userPwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="个性签名">
            <el-input type="textarea" v-model="form2.userDesc"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload class="avatar-uploader" action=""  
                :limit="8" 
                :show-file-list="false"    
                :multiple=true 
                :on-preview="handlePictureCardPreview"  
                :on-remove="handleRemove"
                :before-upload="handleBeforeUpload" 
                :http-request="uploadURL"  v-model="form2.userImg">
              <el-image style="width: 100px; height: 100px" :src="dialogImageUrl" fit="fill"></el-image>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交编辑</el-button>
            <el-button @click="drawer1=false">取消</el-button>
          </el-form-item>
        </el-form>
       



      </el-drawer>









      <el-drawer
        title='用户详情'
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <el-form ref="form3" :model="form3" label-width="80px">
          <el-form-item label="用户昵称">
            <el-input v-model="form3.userNick"></el-input>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-radio-group v-model="form3.userSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户年龄">
            <el-input v-model="form3.userAge"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form3.birthday" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="消费总额">
            <el-input  v-model="form3.userPay"></el-input>
          </el-form-item>
          <el-form-item label="个性签名">
            <el-input type="textarea" v-model="form3.desc"></el-input>
          </el-form-item>
          <el-form-item label="收藏产品">
            <el-button @click="lookPro">{{projectCount}}</el-button>
            <el-button v-if="showPrise" @click="closePro">收起</el-button>
          </el-form-item>
          <div v-if="showPrise">
            <el-table :data="project" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
              <el-table-column prop="proName" label="产品名称" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="typeName" label="产品类型" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="price" label="产品价格" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="surplusCount" label="产品数量" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="description" label="产品描述" align="center" min-width="15%"> </el-table-column>
            </el-table>
          </div>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { client, getFileNameUUID } from "./alioss.js"; //引入
window.Event = new Vue();
import axios from "axios";
export default {
  data() {
    return {
      value1: "",
      input4: "",
      list1: [],
      minDate: "",
      maxDate: "",
      drawer: false,
      drawer1: false,
      direction: "rtl",
      form3: [],
      form2: [],
      project: [],
      projectCount: "",
      showPrise: false,
      dialogImageUrl: "",
      dialogVisible: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    exportData() {
      export2Excel(this.columns, this.list1, "服务详情表");
    },
    closePro() {
      this.showPrise = false;
    },
    getList() {
      axios({
        url: "/api/user/getYhList",
        method: "GET",
      }).then((res) => {
        this.list1 = res.data;
      });
    },
    lookPro() {
      this.showPrise = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.showPrise = false;
        })
        .catch((_) => {});
    },
    handleBeforeUpload(file) {
      const isJPEG = file.name.split(".")[1] === "jpeg";
      const isJPG = file.name.split(".")[1] === "jpg";
      const isPNG = file.name.split(".")[1] === "png";
      const isWEBP = file.name.split(".")[1] === "webp";
      const isGIF = file.name.split(".")[1] === "gif";
      const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
      if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
      }
      if (!isLt500K) {
        this.$message.error("单张图片大小不能超过 4mb!");
      }
      return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
    },
    uploadURL(file) {
      //注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
      var fileName = "img/" + "banner" + `${Date.parse(new Date())}` + ".jpg";
      //定义唯一的文件名，打印出来的uid其实就是时间戳
      client()
        .multipartUpload(fileName, file.file, {
          progress: function(percentage, cpt) {
            console.log("打印进度", percentage);
          },
        })
        .then((res) => {
          //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
          //
          this.dialogImageUrl =
            "http://wwssbb.oss-cn-hangzhou.aliyuncs.com/" + fileName;
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    xiang(sss) {
      this.form3 = sss;
      console.log(sss);
      console.log(sss.userOrder);
      axios({
        url: "/api/user/getUserProject",
        method: "GET",
        params: {
          ids: sss.userOrder,
        },
      }).then((res) => {
        this.project = res.data;
        this.projectCount = this.project.length;
      });
    },
    updateById(sss) {
      this.form2 = sss;
      this.dialogImageUrl = sss.userImg;
    },
    deleteById(sss) {
      axios({
        url: "/api/user/deleteUserById",
        method: "GET",
        params: {
          id: sss.userId,
        },
      }).then((res) => {
        this.getList();
      });
    },
    onSubmit(){
      console.log(this.form2);
      axios({
        url: "/api/user/updateUser",
        method: "post",
        params: {
          userNick: this.form2.userNick,
          userSex: this.form2.userSex,
          userAge: this.form2.userAge,
          userPhone: this.form2.userPhone,
          userPwd: this.form2.userPwd,
          userType: this.form2.userType,
          userType: this.form2.userType,
          userImg: this.form2.userImg,
          userId: this.form2.userId,
          userDesc: this.form2.userDesc,
        },
      }).then((res) => {
        this.drawer1=false;
      });
    }
  },
};
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f7fb;
}

.table {
  margin-top: 20px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.el-upload--text {
  border: none;
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
html {
  display: block;
}

.border {
  border-width: 0px;
  /* position: absolute; */
  left: 0px;
  top: 0px;
  width: 88%;
  height: 912px;
  background: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 6%;
  margin-top: 10px;
}

.erhang {
  margin-top: 20px;
}

.lan {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 20px;
  margin-top: 10px;
  display: inline-block;
}

.p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
  margin-left: 30px;
  display: inline-block;
  margin-top: 10px;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}

.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>
